<template>
  <v-main class="customer-container d-flex">
    <div class="left-container">
      <v-skeleton-loader
        v-if="loadingMenu"
        height="100%"
        tile
        type="list-item@20"
      ></v-skeleton-loader>
      <SliderMenu
        v-else-if="MetaSliderMenu"
        :selectedEntity.sync="selectedEntity"
        :selectedProspect.sync="selectedProspect"
        @routerBack="routerBack"
        :entities="entities"
      ></SliderMenu>
      <Address v-else @routerBack="routerBack"></Address>
    </div>
    <div class="right-container">
      <!-- 标题开始 -->
      <v-card class="tabs-wrap" flat>
        <v-tabs class="tabs" fixed-tabs hide-slider height="37">
          <v-tab
            v-for="(tab, index) in tabs"
            :key="tab.title"
            @click="routerPush(tab.routeName)"
            class="justify-start ma-0 tab"
            :class="{ active: index === selectedTab }"
          >
            {{ tab.title }}
          </v-tab>
        </v-tabs>
      </v-card>
      <!-- 标题结束 -->
      <v-card
        class="content"
        rounded="tl-0 b-lg tr-lg"
        height="calc(100vh - 129px)"
      >
        <v-skeleton-loader
          v-if="loadingContent || loadingMenu"
          height="100%"
          tile
          type="list-item@20"
        ></v-skeleton-loader>
        <router-view></router-view>
      </v-card>
    </div>
  </v-main>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import { catchRouteErr } from "@/common/constants/Utils";
import SliderMenu from "@/components/Customer/SliderMenu.vue";
import SkeletonLoader from "@/components/SkeletonLoader/SkeletonLoader.vue";
import Address from "@/components/Customer/ContactInfo/Address.vue";
import { IEntity, IAddress, IProspect } from "@/components/Customer/index";
@Component({
  components: {
    SliderMenu,
    SkeletonLoader,
    Address,
  },
})
export default class Customer extends Vue {
  // content
  get loadingContent() {
    return this.$store.state.CustomerStore.loadingContent;
  }
  startLoadingContent() {
    this.$store.commit("CustomerStore/startLoadingContent");
  }
  endLoadingContent() {
    this.$store.commit("CustomerStore/endLoadingContent");
  }
  // tabs
  get routeName() {
    return this.$route.name;
  }
  @Watch("routeName", { immediate: true })
  onRouteNameChange(routeName: string) {
    let tabs: object[] = [];
    if (["ExistingCustomer", "ProspectCustomer"].includes(routeName)) {
      tabs = [
        {
          title: "Existing",
          routeName: "ExistingCustomer",
        },
        {
          title: "Prospect",
          routeName: "ProspectCustomer",
        },
      ];
    } else if (routeName === "ContactInfo") {
      tabs = [
        {
          title: "Contact Info",
          routeName: "ContactInfo",
        },
      ];
    }
    this.$store.commit("CustomerStore/setTabs", tabs);
  }
  get tabs() {
    return this.$store.state.CustomerStore.tabs;
  }
  get selectedTab() {
    return this.tabs.findIndex((tab: { routeName: string }) => {
      return tab.routeName === this.routeName;
    });
  }
  routerPush(name: string) {
    this.$router.push({ name: name }).catch((err) => {
      catchRouteErr(err);
    });
  }
  // menu
  get loadingMenu() {
    return this.$store.state.CustomerStore.loadingMenu;
  }
  startLoadingMenu() {
    this.$store.commit("CustomerStore/startLoadingMenu");
  }
  endLoadingMenu() {
    this.$store.commit("CustomerStore/endLoadingMenu");
  }
  selectedEntity: IEntity | null = null;
  @Watch("selectedEntity")
  onSelectedEntityChange(entity: IEntity) {
    this.startLoadingContent();
    setTimeout(() => {
      this.$store.commit("setCompanyList", entity.companyList);
      this.endLoadingContent();
    }, 800);
  }

  get selectedProspect() {
    return this.$store.state.ProspectStore.selectedProspect;
  }
  set selectedProspect(prospect: IProspect) {
    this.$store.commit("ProspectStore/setSelectedProspect", prospect);
  }
  get entities(): Array<IEntity> {
    return this.$store.state.CustomerStore.entities;
  }
  getEntities() {
    this.startLoadingMenu();
    setTimeout(() => {
      const entities = [
        {
          id: "01",
          entityType: "Contractor",
          companyList: [
            {
              id: "1",
              entityNumber: "MB0001",
              entityType: "Contractor",
              entityName: "Auto Company",
              addressTree: [
                {
                  id: "1",
                  locationCode: "Office",
                  parentLocation: "-",
                  address:
                    "11B, Tin Wing Building, No. 1 Hung To Road, Kwun Tong Kowloon",
                  country: "",
                  district: "",
                  area: "",
                  contactInfo: {
                    setting: {
                      id: "1",
                      projectName: "INV20210907001",
                      priority: "",
                      projectType: "System Maintenance",
                      projectLocation: "LC001",
                      projectDescription:
                        "Stay One Step Ahead and In Full Control of Your Contracts by Tracking them with Mizar, Automated Notifications, Reminders & Workflows. Contract Tracking Systems Give Control. Peerless Automation, Unlimited Users, ISO Accredited",
                      items: [
                        {
                          id: "1",
                          department: "AC",
                          userName: "Amy Chan",
                          right: [
                            "read",
                            "write",
                            "delete",
                            "print",
                            "export",
                            "chat",
                            "library",
                            "upload",
                            "deleteDocument",
                          ],
                        },
                        {
                          id: "2",
                          department: "MW",
                          userName: "Mark Wong",
                          right: [
                            "projectManager",
                            "read",
                            "write",
                            "delete",
                            "print",
                            "export",
                            "chat",
                            "library",
                            "upload",
                            "deleteDocument",
                          ],
                        },
                      ],
                    },
                    items: {
                      id: "1",
                      type: "In Use",
                      address:
                        "Office- 11B, Tin Wing Building, No. 1 Hung To Road, Kwun Tong Kowloon",
                      items: [
                        {
                          id: "1",
                          itemNumber: "BM0001",
                          cateCode: "PT",
                          alias: "",
                          locationCode: "Office",
                          itemDescription: "Painting",
                          serialNumber: "0001 ab",
                          QTY: "1",
                          cost: "50.00",
                          dateExpire: "2022-09-06",
                          attachment: {
                            productPhoto: "",
                            attachmentList: [
                              {
                                id: "1",
                                date: "2014-08-12",
                                fileList: [
                                  {
                                    id: "1",
                                    src: "https://cdn.pixabay.com/photo/2016/05/24/16/48/mountains-1412683__340.png",
                                    ext: "png",
                                    fileName: "mountains-1412683__340.png",
                                  },
                                ],
                              },
                              {
                                id: "1",
                                date: "2019-08-12",
                                fileList: [
                                  {
                                    id: "2",
                                    src: "https://cdn.pixabay.com/photo/2014/11/27/10/29/mountain-547363__340.jpg",
                                    ext: "jpg",
                                    fileName: "mountain-547363__340.jpg",
                                  },
                                ],
                              },
                            ],
                          },
                        },
                        {
                          id: "2",
                          itemNumber: "ELEV 200",
                          cateCode: "ELEV",
                          itemDescription: "Elevator 200 steps",
                          alias: "",
                          locationCode: "Office2",
                          serialNumber: "EL2378200",
                          QTY: "1",
                          cost: "8,000.00",
                          dateExpire: "2022-09-06",
                          attachment: {
                            productPhoto: "",
                            attachmentList: [],
                          },
                        },
                      ],
                    },
                    contactPersons: [
                      {
                        id: "1",
                        locationCode: "Office",
                        contactPerson: "Tim Wong",
                        userName: "Tim",
                        tel: "2367 8922",
                        mobileNumber: "9028 2389",
                        email: "timwong@yahoo.com",
                        faxNumber: "2307 2388",
                      },
                    ],
                    contracts: [
                      {
                        id: "1",
                        avatar:
                          "https://img1.baidu.com/it/u=911451610,3416826403&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
                        contactInfo: "INV20210907001",
                        startDate: "2021-01-01",
                        endDate: "2022-12-31",
                        locationCode: "LC001",
                        contractTAndC: "M:3,5,9,11:W:Any:D:3",
                        cateCode: "System Maintenance",
                        contractSum: "0",
                        contractDescription:
                          "Stay One Step Ahead and In Full Control of Your Contracts by Tracking them with Mizar, Automated Notifications, Reminders & Workflows. Contract Tracking Systems Give Control. Peerless Automation,Unlimited Users, ISO Accredited",
                        serviceProvider: "",
                        team: "",
                        PIC: "Mark Wong",
                        items: [
                          {
                            id: "2",
                            itemNumber: "ELEV 200",
                            cateCode: "ELEV",
                            itemDescription: "Elevator 200 steps",
                            alias: "",
                            locationCode: "Office2",
                            serialNumber: "EL2378200",
                            QTY: "1",
                            cost: "8,000.00",
                            dateExpire: "2022-09-06",
                          },
                        ],
                      },
                      {
                        id: "2",
                        avatar:
                          "https://img0.baidu.com/it/u=4275172878,2244226890&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
                        contactInfo: "CN-210063",
                        startDate: "2021-09-07",
                        endDate: "2022-09-30",
                        locationCode: "LC001",
                        contractTAndC: "M:3,5,9,11:W:Any:D:3",
                        cateCode: "SM",
                        contractSum: "0",
                        contractDescription:
                          "Stay One Step Ahead and In Full Control of Your Contracts by Tracking them with Mizar, Automated Notifications, Reminders & Workflows. Contract Tracking Systems Give Control. Peerless Automation,Unlimited Users, ISO Accredited",
                        serviceProvider: "",
                        team: "",
                        PIC: "Mark Wong",
                        items: [],
                      },
                    ],
                  },
                  children: [
                    {
                      id: "2",
                      locationCode: "Zone 1",
                      parentLocation: "",
                      address: "9-11 Ferry Road, Hung Hom, Kowloon",
                      country: "",
                      district: "",
                      area: "",
                      contactInfo: {
                        setting: {
                          id: "1",
                          projectName: "INV20210907001",
                          priority: "",
                          projectType: "System Maintenance",
                          projectLocation: "LC001",
                          projectDescription:
                            "Stay One Step Ahead and In Full Control of Your Contracts by Tracking them with Mizar, Automated Notifications, Reminders & Workflows. Contract Tracking Systems Give Control. Peerless Automation, Unlimited Users, ISO Accredited",
                          items: [
                            {
                              id: "1",
                              department: "CS",
                              userName: "Angela Lo",
                              right: [
                                "projectManager",
                                "read",
                                "write",
                                "delete",
                                "print",
                                "export",
                                "chat",
                                "library",
                                "upload",
                                "deleteDocument",
                              ],
                            },
                            {
                              id: "2",
                              department: "FSE",
                              userName: "Eric Chou",
                              right: [
                                "projectManager",
                                "read",
                                "write",
                                "delete",
                                "print",
                                "export",
                                "chat",
                                "library",
                                "upload",
                                "deleteDocument",
                              ],
                            },
                          ],
                        },
                        items: {
                          id: "1",
                          type: "In Use",
                          address:
                            "Office- 11B, Tin Wing Building, No. 1 Hung To Road, Kwun Tong",
                          items: [
                            {
                              id: "3",
                              itemNumber: "ELEV 230",
                              cateCode: "ELEV",
                              itemDescription: "Elevator 230 steps",
                              alias: "",
                              locationCode: "Office3",
                              serialNumber: "EL412378",
                              QTY: "1",
                              cost: "12,000.00",
                              dateExpire: "2022-09-06",
                              attachment: {
                                productPhoto: "",
                                attachmentList: [],
                              },
                            },
                            {
                              id: "6",
                              itemNumber: "LIFT 5CBM",
                              cateCode: "LIFT",
                              itemDescription: "Lift 5 CBM",
                              alias: "",
                              locationCode: "Office6",
                              serialNumber: "LIs7f4",
                              QTY: "12",
                              cost: "28,000.00",
                              dateExpire: "2022-09-06",
                              attachment: {
                                productPhoto: "",
                                attachmentList: [],
                              },
                            },
                          ],
                        },
                        contactPersons: [
                          {
                            id: "1",
                            locationCode: "Office",
                            contactPerson: "Tim Wong",
                            userName: "Tim",
                            tel: "2367 8922",
                            mobileNumber: "9028 2389",
                            email: "timwong@yahoo.com",
                            faxNumber: "2307 2388",
                          },
                        ],
                        contracts: [
                          {
                            id: "1",
                            avatar:
                              "https://img1.baidu.com/it/u=911451610,3416826403&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
                            contactInfo: "INV20210907001",
                            startDate: "2021-01-01",
                            endDate: "2022-12-31",
                            locationCode: "LC001",
                            contractTAndC: "M:3,5,9,11:W:Any:D:3",
                            cateCode: "System Maintenance",
                            contractSum: "0",
                            contractDescription:
                              "Stay One Step Ahead and In Full Control of Your Contracts by Tracking them with Mizar, Automated Notifications, Reminders & Workflows. Contract Tracking Systems Give Control. Peerless Automation,Unlimited Users, ISO Accredited",
                            serviceProvider: "",
                            team: "",
                            PIC: "Mark Wong",
                            items: [],
                          },
                          {
                            id: "2",
                            avatar:
                              "https://img0.baidu.com/it/u=4275172878,2244226890&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
                            contactInfo: "CN-210063",
                            startDate: "2021-09-07",
                            endDate: "2022-09-30",
                            locationCode: "LC001",
                            contractTAndC: "M:3,5,9,11:W:Any:D:3",
                            cateCode: "SM",
                            contractSum: "0",
                            contractDescription:
                              "Stay One Step Ahead and In Full Control of Your Contracts by Tracking them with Mizar, Automated Notifications, Reminders & Workflows. Contract Tracking Systems Give Control. Peerless Automation,Unlimited Users, ISO Accredited",
                            serviceProvider: "",
                            team: "",
                            PIC: "Mark Wong",
                            items: [],
                          },
                        ],
                      },
                    },
                  ],
                },
                {
                  id: "3",
                  locationCode: "Warehouse",
                  parentLocation: "",
                  address: "2/F, Acme Building, 22-28 Nanking Street, Kowloon",
                  country: "",
                  district: "",
                  area: "",
                  contactInfo: {
                    setting: {
                      id: "1",
                      projectName: "INV20210907001",
                      priority: "",
                      projectType: "System Maintenance",
                      projectLocation: "LC001",
                      projectDescription:
                        "Stay One Step Ahead and In Full Control of Your Contracts by Tracking them with Mizar, Automated Notifications, Reminders & Workflows. Contract Tracking Systems Give Control. Peerless Automation, Unlimited Users, ISO Accredited",
                      items: [
                        {
                          id: "1",
                          department: "CS",
                          userName: "Angela Lo",
                          right: [
                            "projectManager",
                            "read",
                            "write",
                            "delete",
                            "print",
                            "export",
                            "chat",
                            "library",
                            "upload",
                            "deleteDocument",
                          ],
                        },
                        {
                          id: "2",
                          department: "FSE",
                          userName: "Eric Chou",
                          right: [
                            "projectManager",
                            "read",
                            "write",
                            "delete",
                            "print",
                            "export",
                            "chat",
                            "library",
                            "upload",
                            "deleteDocument",
                          ],
                        },
                      ],
                    },
                    items: {
                      id: "1",
                      type: "In Use",
                      address:
                        "Office- 11B, Tin Wing Building, No. 1 Hung To Road, Kwun Tong",
                      items: [
                        {
                          id: "3",
                          itemNumber: "ELEV 230",
                          cateCode: "ELEV",
                          itemDescription: "Elevator 230 steps",
                          alias: "",
                          locationCode: "Office3",
                          serialNumber: "EL412378",
                          QTY: "1",
                          cost: "12,000.00",
                          dateExpire: "2022-09-06",
                          attachment: {
                            productPhoto: "",
                            attachmentList: [],
                          },
                        },
                        {
                          id: "4",
                          itemNumber: "ELEV 260",
                          cateCode: "ELEV",
                          itemDescription: "Escalator",
                          alias: "",
                          locationCode: "Office4",
                          serialNumber: "ELda8a234f",
                          QTY: "1",
                          cost: "10,000.00",
                          dateExpire: "2022-09-06",
                          attachment: {
                            productPhoto: "",
                            attachmentList: [],
                          },
                        },
                      ],
                    },
                    contactPersons: [
                      {
                        id: "1",
                        locationCode: "Office",
                        contactPerson: "Tim Wong",
                        userName: "Tim",
                        tel: "2367 8922",
                        mobileNumber: "9028 2389",
                        email: "timwong@yahoo.com",
                        faxNumber: "2307 2388",
                      },
                    ],
                    contracts: [
                      {
                        id: "1",
                        avatar:
                          "https://img1.baidu.com/it/u=911451610,3416826403&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
                        contactInfo: "INV20210907001",
                        startDate: "2021-01-01",
                        endDate: "2022-12-31",
                        locationCode: "LC001",
                        contractTAndC: "M:3,5,9,11:W:Any:D:3",
                        cateCode: "System Maintenance",
                        contractSum: "0",
                        contractDescription:
                          "Stay One Step Ahead and In Full Control of Your Contracts by Tracking them with Mizar, Automated Notifications, Reminders & Workflows. Contract Tracking Systems Give Control. Peerless Automation,Unlimited Users, ISO Accredited",
                        serviceProvider: "",
                        team: "",
                        PIC: "Mark Wong",
                        items: [
                          {
                            id: "5",
                            itemNumber: "LIFT 3CBM",
                            cateCode: "LIFT",
                            itemDescription: "Lift 3 CBM",
                            alias: "",
                            locationCode: "Office5",
                            serialNumber: "LIf8a2",
                            QTY: "1",
                            cost: "25,000.00",
                            dateExpire: "2022-09-06",
                          },
                          {
                            id: "7",
                            itemNumber: "SW11",
                            cateCode: "SW",
                            itemDescription: "Toilet Bowl",
                            alias: "",
                            locationCode: "Office1",
                            serialNumber: "SW487",
                            QTY: "1",
                            cost: "100.00",
                            dateExpire: "2022-09-06",
                          },
                        ],
                      },
                      {
                        id: "2",
                        avatar:
                          "https://img0.baidu.com/it/u=4275172878,2244226890&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
                        contactInfo: "CN-210063",
                        startDate: "2021-09-07",
                        endDate: "2022-09-30",
                        locationCode: "LC001",
                        contractTAndC: "M:3,5,9,11:W:Any:D:3",
                        cateCode: "SM",
                        contractSum: "0",
                        contractDescription:
                          "Stay One Step Ahead and In Full Control of Your Contracts by Tracking them with Mizar, Automated Notifications, Reminders & Workflows. Contract Tracking Systems Give Control. Peerless Automation,Unlimited Users, ISO Accredited",
                        serviceProvider: "",
                        team: "",
                        PIC: "Mark Wong",
                        items: [
                          {
                            id: "6",
                            itemNumber: "LIFT 5CBM",
                            cateCode: "LIFT",
                            itemDescription: "Lift 5 CBM",
                            alias: "",
                            locationCode: "Office6",
                            serialNumber: "LIs7f4",
                            QTY: "12",
                            cost: "28,000.00",
                            dateExpire: "2022-09-06",
                          },
                        ],
                      },
                    ],
                  },
                },
              ],
            },
          ],
        },
      ];
      this.$store.commit("CustomerStore/setEntities", entities);
      this.endLoadingMenu();
    }, 800);
  }
  get MetaSliderMenu() {
    if (this.$route.meta) {
      return this.$route.meta.sliderMenu;
    } else {
      return false;
    }
  }
  routerBack() {
    this.$router.back();
  }
  created() {
    this.getEntities();
  }
}
</script>

<style lang="scss">
@import "@/views/04000000-Customer/Customer.scss";
</style>
